<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页二</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link href="/plugins/cronGen/font/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <script type="text/javascript" src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="/css/daterangepicker.css">
    <script type="text/javascript" src="/js/moment.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/daterangepicker.js" charset="utf-8"></script>
    <style>
        .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
        .icon {margin-right:10px;color:#1aa094;}
        .icon-cray {color:#ffb800!important;}
        .icon-blue {color:#1e9fff!important;}
        .icon-tip {color:#ff5722!important;}
        .layuimini-qiuck-module {text-align:center;margin-top: 10px}
        .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
        .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
        .welcome-module {width:100%;}
        .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
        .panel-body {padding:10px}
        .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
        .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
        .layui-red {color:red}
        .main_btn > p {height:40px;}
        .layui-bg-number {background-color:#F8F8F8;}
        .layuimini-notice:hover {background:#f6f6f6;}
        .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
        .layuimini-notice-title,.layuimini-notice-label {
            padding-right: 70px !important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;}
        .layuimini-notice-title {line-height:28px;font-size:14px;}
        .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-warning icon"></i>数据统计</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10">
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="">
                                                        <span class="label pull-right layui-bg-blue" >任务数量</span>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" th:text="${jobInfoCount}"></h1>
                                                        <small>调度中心运行的任务数量</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div>
                                                            <span  class="label pull-right layui-bg-red">调度次数</span>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" th:text="${jobLogCount}"></h1>
                                                        <small>调度中心触发的调度次数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs4">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="">
                                                        <span class="label pull-right layui-bg-orange" >执行器数量</span>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" th:text="${executorCount}"></h1>
                                                        <small>调度中心在线的执行器机器数量</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-row layui-col-space10">

                        <div class="layui-row layui-col-space10">

                            <div class="layui-col-md10">
                                <div class="layui-card-header"><i class="fa fa-line-chart"></i>报表统计</div>
                            </div>
                            <div class="layui-col-md2">
                                <div class="layui-card-header" style="float: right">
                                    <button type="button"  id="filterTime" >
                                        <i class="fa fa-calendar"></i>
                                    </button>
                                </div>
                            </div>

                        </div>



                        <div class="layui-col-md6">
                            <div class="layui-card">

                                <div class="layui-card-body">
                                    <div id="dateTjLine" style="width: 100%;min-height:500px"></div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-md6">
                            <div class="layui-card">
                                <div class="layui-card-body">
                                    <div id="dateTjPie" style="width: 100%;min-height:500px"></div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
 var  echarts=undefined;
    layui.use(['layer', 'miniTab','echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            miniTab = layui.miniTab;


        echarts = layui.echarts
        miniTab.listen();




    });

    var rangesConf = {
        '今日': [moment().startOf('day'), moment().endOf('day')],
        '昨日': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
        '最近7天': [moment().subtract(6, 'days').startOf('day'), moment().endOf('day')],
        '最近30天': [moment().subtract(29, 'days').startOf('day'), moment().endOf('day')],
        '本月': [moment().startOf('month').startOf('month'), moment().endOf('month')],
        '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    };
    $(document).ready(function() {



        $('#filterTime').daterangepicker({
            autoApply:false,
            singleDatePicker:false,
            showDropdowns:false,        // 是否显示年月选择条件
            timePicker: true, 			// 是否显示小时和分钟选择条件
            timePickerIncrement: 10, 	// 时间的增量，单位为分钟
            timePicker24Hour : true,
            opens : 'left', //日期选择框的弹出位置
            ranges: rangesConf,
            locale : {
                format: 'YYYY-MM-DD HH:mm:ss',
                separator : ' - ',
                customRangeLabel : '自定义' ,
                applyLabel :  '确定'  ,
                cancelLabel :  '取消'  ,
                fromLabel : '起始时间' ,
                toLabel :'结束时间' ,
                daysOfWeek : '日,一,二,三,四,五,六'.split(',') ,        // '日', '一', '二', '三', '四', '五', '六'
                monthNames : '一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月'.split(',') ,        // '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
                firstDay : 1
            },
            startDate: rangesConf['最近7天'][0],
            endDate: rangesConf['最近7天'][1]
        }, function(start, end, label){
            freshChartDate(start,end);
        });
        freshChartDate(rangesConf['最近7天'][0], rangesConf['最近7天'][1]);
    });

    function freshChartDate(startDate, endDate) {
        $.ajax({
            url: '/chartInfo',
            type: 'POST',
            data : {
                "startDate":startDate.format('YYYY-MM-DD HH:mm:ss'),
                "endDate":endDate.format('YYYY-MM-DD HH:mm:ss')
            },
            dataType : "json",
            success: function (res) {
                console.log('----------back------ddddddd',res)
                if (res.code == "200") {
                    lineChartInit(res)
                    pieChartInit(res);
                } else {
                    layer.open({
                        title: res.message,
                        btn: [ '确认' ],
                        content: (res.message || '失败' ),
                        icon: '2'
                    });
                }

            },
            error: function (error) {

            }
        })
    }

    function  lineChartInit(data){
        var option = {
            title: {
                text: '日期分布图'
            },
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data:['成功', '失败', '进行中']
            },
            toolbox: {
                feature: {
                    /*saveAsImage: {}*/
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : data.data.triggerDayList
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'成功',
                    type:'line',
                    stack: 'Total',
                    areaStyle: {normal: {}},
                    data: data.data.triggerDayCountSucList
                },
                {
                    name:'失败',
                    type:'line',
                    stack: 'Total',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    areaStyle: {normal: {}},
                    data: data.data.triggerDayCountFailList
                },
                {
                    name:'进行中',
                    type:'line',
                    stack: 'Total',
                    areaStyle: {normal: {}},
                    data: data.data.triggerDayCountRunningList
                }
            ],
            color:['#00A65A', '#c23632', '#F39C12']
        };
        var dateTj = echarts.init(document.getElementById('dateTjLine'));
        dateTj.setOption(option);

        // echarts 窗口缩放自适应
        window.onresize = function(){
            dateTj.resize();
        }
    }




 function pieChartInit(data) {
     var option = {
         title : {
             text: '成功比例图' ,
             /*subtext: 'subtext',*/
             x:'center'
         },
         tooltip : {
             trigger: 'item',
             formatter: "{b} : {c} ({d}%)"
         },
         legend: {
             orient: 'vertical',
             left: 'left',
             data: ['成功','失败', '进行中' ]
         },
         series : [
             {
                 //name: '分布比例',
                 type: 'pie',
                 radius : '55%',
                 center: ['50%', '60%'],
                 data:[
                     {
                         name:'成功',
                         value:data.data.triggerCountSucTotal
                     },
                     {
                         name:'失败',
                         value:data.data.triggerCountFailTotal
                     },
                     {
                         name:'进行中',
                         value:data.data.triggerCountRunningTotal
                     }
                 ],
                 itemStyle: {
                     emphasis: {
                         shadowBlur: 10,
                         shadowOffsetX: 0,
                         shadowColor: 'rgba(0, 0, 0, 0.5)'
                     }
                 }
             }
         ],
         color:['#00A65A', '#c23632', '#F39C12']
     };
     var dateTjPie = echarts.init(document.getElementById('dateTjPie'));
     dateTjPie.setOption(option);
     // echarts 窗口缩放自适应
     window.onresize = function(){
         dateTjPie.resize();
     }
 }

</script>
</body>
</html>
